<template>
    <div>
        <div v-if="visable">
            <div class="content">
                <span v-html="message"></span>
            </div>
            <div class="over">

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "refresh",
        data() {
            return {
                // 1 打开弹窗、0 关闭弹窗
                visable: 1,
                message: "请稍后，正在重新身份认证",
                redirectURL: null

            }
        },
        created() {
            this.redirectURL = this.$route.query.redirectURL || '/';
            this.refreshLogin();
        },
        methods: {
            // 刷新登录令牌
            refreshLogin() {
                this.$store.dispatch("SendRefreshToken").then(response => {

                    // 说明过期的令牌已经被重新赋值
                    window.location.href = this.redirectURL;
                }).catch(error => {
                    // 刷新令牌失败，跳转到去登录页
                    this.message = `您的身份已经过期，请您点击跳转<a href="/?redirectURL=${this.redirectURL}">登录页重新登录</a>`;
                })
            }
        }
    }
</script>

<style scoped>
    .content {
        position: fixed;
        height: 120px;
        width: 500px;
        line-height: 120px;
        text-align: center;
        font-size: 19px;
        color: #303133;
        background-color: #fff;
        border-radius: 0.25rem;
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);
        z-index: 1000;
    }

    a {
        color: #345dc2;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    .over {
        position: fixed;
        width: 100%;
        height: 100%;
        opacity: 0.5; /* 透明度为50% */
        filter: alpha(opacity=50);
        top: 0;
        left: 0;
        z-index: 999;
        background-color: #000;
    }

</style>
